import Taro, { Component } from '@tarojs/taro'
import { View, Text,Image,Swiper,SwiperItem } from '@tarojs/components'
import {AtAvatar } from 'taro-ui'
import './detailedPatientHistory.scss'
import item_image from '../../img/item_image.png'
import touxiang from '../../img/touxiang3.png'
import right from '../../img/right2.png'
import app from '../../main.js'

export default class DetailedPatientHistory extends Component {
0
    config = {
      navigationBarTitleText: '周星星的病历'
    } 
    constructor(){
        super(...arguments) 
    }

    render(){
        const gird=[
            [{value1:'项目'},{value2:'右眼',is_color:false},{value3:'左眼',is_color:false}],
            [{value1:'裸眼视力'},{value2:'0.6',is_color:true},{value3:'1.2',is_color:false}],
            [{value1:'矫正视力'},{value2:'-3.45DS/-5.67DCX150->1.0'},{value3:'-3.45DS/-5.67DCX150->1.020'}],
            [{value1:''},{value2:'准',is_color:true},{value3:'不准',is_color:true,is_colors:true}],
            [{value1:''},{value2:'红绿可辨',is_color:false},{value3:'红绿不可辨',is_color:true}],
            [{value1:'光定位'},{value2:'红肿',is_color:true},{value3:'正常',is_color:false}],
            [{value1:'色觉'},{value2:'倒睫',is_color:true},{value3:'正常',is_color:false} ],
            [{value1:'眼睑'},{value2:'外斜45',is_color:true},{value3:'正常',is_color:false}],
            [{value1:'睫毛'},{value2:'异常',is_color:true},{value3:'正常',is_color:false}],
            [{value1:'眼位',value2:'C2 N4 P5 IOL',value3:'C2 N4 P5'}]
          ];
         const list = gird.map((item) =>{
              return <View className='tab-row'> 
                      <View className='tab-col-1'><Text>{item[0].value1}</Text></View>
                      <View className={item[1].is_color ? 'tab-col-red' : 'tab-col'}><Text>{item[1].value2}</Text></View>  
                      <View className={item[2].is_color ? 'tab-col-red' : 'tab-col'}><Text>{item[2].value3}</Text></View>
                      </View>
          } )

        return(
            <View className='allWeb'>
                <View className='webTitle'>
                    <Text className='title'>当前病历为数码党医生所填写</Text>
                </View>
                <View className='webAvadar'>
                    <View>
                        <AtAvatar
                        className='webAvadarSize'
                        image={touxiang}
                        circle
                        />
                    </View>
                    <View className='webAvadarInfo'>
                        <View>
                            <Text className='name'>数码党</Text> 主任医师
                        </View>
                        <View><Text>中山眼科中心</Text></View>
                    </View>
                </View>
                <View className='content1'>
                    <View className='content1Title'>
                        <Text className='title'>基本信息</Text>
                        <Text>收起</Text>
                    </View>
                    <View className='contentText'>
                      <View><Text className='title'>患者信息</Text></View>
                      <View><Text className='text1'>郭星星，男，25岁</Text></View>  
                    </View>
                    <View className='contentText'>
                      <View><Text className='title'>就诊日期</Text></View>
                      <View><Text className='text1'>2019年1月25日</Text></View>  
                    </View>
                    <View className='contentText'>
                      <View><Text className='title'>现病史</Text></View>
                      <View className='text1' ><Text>双眼渐进性视力下降，右眼渐进性视力下降，左眼渐进性视力下降，双眼偶有眼痒</Text></View>  
                    </View>
                    <View className='contentText'>
                      <View><Text className='title'>既往史</Text></View>
                      <View className='text1'><Text>无眼外伤史，糖尿病，无戴镜，双眼白内障，无传染病史，头孢类过敏</Text></View>  
                    </View>
                    <View className='contentText'>
                      <View><Text className='title'>家族史</Text></View>
                      <View className='text1'><Text>无遗传性病史</Text></View>  
                    </View>
                    <View className='contentText'>
                      <View><Text className='title'>诊断</Text></View>
                      <View className='text1'><Text>双眼年龄相关性白内障，右眼翼状胬肉，右眼虹膜松弛症，双眼眼底病</Text></View>  
                    </View>
                    <View className='contentText'>
                      <View><Text className='title'>治疗</Text></View>
                      <View className='text1'><Text>PHACO，MS-MICS, SCIS</Text></View>  
                    </View>
                </View>
                <View className='content2'>
                    <View className='content1Title'>
                        <Text className='title'>检查数据</Text>
                        <Text >收起</Text>
                    </View>
                    <View className='table'>
                        {list}
                    </View>
                </View>
                <View className='content3'>
                  <View className='content3Tile'><Text className='title1'>检查图片</Text></View>
                  <Swiper circular >
                    <SwiperItem className='swiperItem-row'>
                        <View className='SwiperView'>
                            <View>
                            <Image  
                            className='swiperImage'
                            src={item_image}
                            />
                            </View>
                            <View className='content3Tile'><Text>右眼裂缝灯</Text></View>
                        </View>
                        <View className='SwiperView'>
                            <View>
                            <Image  
                            className='swiperImage'
                            src={item_image}
                            />
                            </View>
                            <View className='content3Tile'><Text>右眼裂缝灯</Text></View>
                        </View>
                        <View className='SwiperView'>
                            <View>
                            <Image  
                            className='swiperImage'
                            src={item_image}
                            />
                            </View>
                            <View className='content3Tile'><Text>右眼裂缝灯</Text></View>
                        </View>
                    </SwiperItem>
                    <SwiperItem className='swiperItem-row'>
                        <View className='SwiperView'>
                            <View>
                            <Image  
                            className='swiperImage'
                            src={item_image}
                            />
                            </View>
                            <View className='content3Tile'><Text>右眼裂缝灯</Text></View>
                        </View>
                        <View className='SwiperView'>
                            <View>
                            <Image  
                            className='swiperImage'
                            src={item_image}
                            />
                            </View>
                            <View className='content3Tile'><Text>右眼裂缝灯</Text></View>
                        </View>
                        <View className='SwiperView'>
                            <View>
                            <Image  
                            className='swiperImage'
                            src={item_image}
                            />
                            </View>
                            <View className='content3Tile'><Text>右眼裂缝灯</Text></View>
                        </View>
                    </SwiperItem>
                    <SwiperItem className='swiperItem-row'>
                        <View className='SwiperView'>
                            <View>
                            <Image  
                            className='swiperImage'
                            src={item_image}
                            />
                            </View>
                            <View className='content3Tile'><Text>右眼裂缝灯</Text></View>
                        </View>
                        <View className='SwiperView'>
                            <View>
                            <Image  
                            className='swiperImage'
                            src={item_image}
                            />
                            </View>
                            <View className='content3Tile'><Text>右眼裂缝灯</Text></View>
                        </View>
                        <View className='SwiperView'>
                            <View>
                            <Image  
                            className='swiperImage'
                            src={item_image}
                            />
                            </View>
                            <View className='content3Tile'><Text>右眼裂缝灯</Text></View>
                        </View>
                    </SwiperItem>
                  </Swiper>
                </View>
                <View className='content4'>
                    <View className='v1'>
                        <View ><Text className='title'>病程</Text></View>
                        <View className='v2'>
                        <View className='t2' >收到</View>
                        <View className='t2'>顺序</View>
                        <View className='t2'>倒序</View>
                        </View>
                    </View>
                    <View className='content4List'>
                        <View className='v2'>
                            <View className='v3'><Image src={right} className='ListImage'/> <Text>首诊</Text> </View>
                            <View>就诊于2018年12月22日</View>
                        </View>
                        <View className='v2'>
                            <View className='v3'><Image src={right} className='ListImage'/> <Text>手术</Text></View>
                            <View>就诊于2018年12月22日</View>
                        </View>
                        <View className='v2'>
                            <View className='v3'><Image src={right} className='ListImage'/> <Text>复诊</Text></View>
                            <View>就诊于2018年12月22日</View>
                        </View>
                        <View className='v2'>
                            <View style='height:60px;'></View>
                            <View></View>
                        </View>
                    </View>
                </View>

            </View>
        )
    }
}